<template>
    <div class="listContent" >
        <!-- 强制刷新 -->
        <!-- <div class="refreshData">
           <el-button  class="elBtn" type="primary" style="margin-left:20px;border-radius:20px;"><i class="el-icon-refresh"></i> 刷新</el-button> 
        </div> -->
        <div class="topSearch">
            <div class="search">
                <input type="text" name="" id="" placeholder="输入方案名称搜索" @keyup.enter="selectProgram" v-model="key">
                <i class="el-icon-search" @click.prevent="selectProgram"></i>
            </div>
            <router-link to="/programAdd">
                <!-- <div class="oprate v-btn">
                    <span>高级查询</span>
                </div> -->
                <el-button  class="elBtn" type="primary" style="margin-left:20px;border-radius:20px;">高级查询</el-button>
               
            </router-link> 
             <!-- <el-button  class="elBtn" type="primary" style="margin-left:20px;border-radius:20px;" v-if="showUpload" @click="centerDialogVisible = true"><i class="el-icon-refresh"></i> 重新加载</el-button>  -->
        </div>
        <div class="list worksListDiv listPageStyle">
            <div class="listCommon">
                <div class="worksList common-box" v-for="(item,index) in listData" :key="index" @mouseover="showEdit=(index+1)" @mouseout="showEdit=0" title="预览图片">
                    <div class="v-icon">
                        <span>{{item.name}}</span>
                    </div>
                    <div class="imgBox">
                        <viewer>
                            <img :src="item.picture" alt="">
                        </viewer>
                    </div>
                    <transition name="fade">
                        <div class="operateBar" v-show="showEdit==(index+1)">
                            <el-button type="warning" size="mini" icon="el-icon-reading" circle title="详情" @click="doDetail(item.id)" style="margin-right:10px;"></el-button>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="pagenation">
            <el-pagination background 
            layout="prev, pager, next, sizes, total, jumper" 
            :page-sizes="pagesizes"
			:page-size="pagesize"
            :total="totalNum"
            @current-change="changePage"
            @size-change="sizeChange"
            > </el-pagination>
        </div>

        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>此操作将会消耗大量资源，需谨慎使用!确认重新加载数据?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="sureReload">确 定</el-button>
            </span>
        </el-dialog>
       
       <!-- 对话框 -->
        <el-dialog class="detailDialog" title="机构详情" :visible.sync="dialogFormVisible" width="70%" max-height="90%" center>
            <el-tabs type="card">
                <el-tab-pane label="主要输出信息">
                    <el-form class="dialogForm" action="" :model="detailForm" ref="detailForm">
                        <el-form-item label="" prop="userName" class="worksItem" >
                            <div class="worksInput workImgDiv">
                                <div class="labelText"><i></i><span>机构简图</span> </div>
                                <div class="addImg" >
                                    <viewer>
                                        <img :src="detailForm.picture" alt="" style="width:100%;height:100%;">
                                    </viewer>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="userName" class="worksItem" >
                            <div class="worksInput workImgDiv">
                                <div class="labelText"><i></i><span>传动函数</span> </div>
                                <div class="addImg" >
                                    <viewer>
                                        <img :src="detailForm.remarks" alt="" style="width:100%;height:100%;">
                                    </viewer>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="name" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>机构名称</span> </div>
                                <el-input type="text"  v-model="detailForm.name" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="name" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>序号</span> </div>
                                <el-input type="text"  v-model="detailForm.id" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="gjs" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>构件数</span> </div>
                                <el-input type="text"  v-model="detailForm.gjs" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        

                        <el-form-item label="" prop="jhgx" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>几何关系</span> </div>
                                <el-input type="text"  v-model="detailForm.jhgx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="ydlxs" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>运动链形式</span> </div>
                                <el-input type="text"  v-model="detailForm.ydlxs" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="rack" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>机架</span></div> 
                                <el-input type="text"  v-model="detailForm.rack" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="actuator" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>驱动件</span></div> 
                                <el-input type="text"  v-model="detailForm.actuator" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="follower" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>从动件</span> </div>
                                <el-input type="text"  v-model="detailForm.follower" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="type" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>类型</span></div> 
                                <el-input type="text"  v-model="detailForm.type" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="decorate" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>布置</span> </div>
                                <el-input type="text"  v-model="detailForm.decorate" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="机构特性">
                    <el-form class="dialogForm" action="" :model="detailForm" ref="detailForm">
                        <el-form-item label="" prop="zczxdwz" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>主从轴相对位置</span> </div>
                                <el-input type="text"  v-model="detailForm.zczxdwz" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="xdcc" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>相对尺寸</span> </div>
                                <el-input type="text"  v-model="detailForm.xdcc" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="cdhsdfdcx" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>传动函数的非对称性</span> </div>
                                <el-input type="text"  v-model="detailForm.cdhsdfdcx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="cdhsdxxbf" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>传动函数的线性部分</span> </div>
                                <el-input type="text"  v-model="detailForm.cdhsdxxbf" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="jsdtx" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>加速度特性</span> </div>
                                <el-input type="text"  v-model="detailForm.jsdtx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="xckdx" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>行程可调性</span> </div>
                                <el-input type="text" v-model="detailForm.xckdx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="mscxdzs" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>每双行程的转数</span></div> 
                                <el-input type="text"  v-model="detailForm.mscxdzs" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="zcdxknx" class="worksItem" >
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>主从动件可逆性</span> </div>
                                <el-input type="text"  v-model="detailForm.zcdxknx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                    </el-form>
                </el-tab-pane>
            </el-tabs>
            
        </el-dialog>
    </div>
</template>

<script>
import commonFun from './commonFun.js'
export default {
    data(){
        return {
            dialogFormVisible: false,
            centerDialogVisible:false,
            showEdit:"",
            length:8,
            listData:[],
            currpage:1, // 当前页
            pagesizes:[6, 10, 15, 20],
            pagesize:6, // 每页显示条数
            key:"",
            totalNum:10, // 总数
            ids:[], // 批量删除的id数组
            showUpload:false,
            edit:true,
            detailForm:{
                id:"",
                name:"",
                type:"",
                picture:"",
                cdhs:"",
                gjs:"",
                jhgx:"",
                ydlxs:"",
                rack:"",
                actuator:"",
                follower:"",
                decorate:"",
                zczxdwz:"",
                xdcc:"",
                cdhsdfdcx:"",
                cdhsdxxbf:"",
                jsdtx:"",
                xckdx:"",
                mscxdzs:"",
                zcdxknx:"",
                remarks:""
            }
        }
    },
    created(){
        let userRole = this.$common.getUserInfo()?this.$common.getUserInfo().roleName:""
        if(userRole) this.showUpload = userRole.join(",").indexOf("管理员") == -1?false:true
        this.selectProgram()
    },
    methods:{
        sureReload(){
            this.$api.clearEs()
            .then(result=>{
                this.centerDialogVisible = false
                if(result.data.success){
                    this.selectProgram()
                }else{
                    this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                }
            })
        },
        // 全文搜索
        searchAll(){
            const params = {
                key:this.key,
                page:this.currpage,
                limit:this.pagesize
            }
            this.$api.searchAll(params)
            .then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.listData = result.data.data
                        _this.totalNum = result.data.data.length
                    }
                })
                
            })
            
        },
        // 数据查询
        selectProgram(){
            const params = {
                name:this.key,
                page:this.currpage,
                limit:this.pagesize
            }
            var _this = this
            this.$api.selectProgram(params)
            .then(result=>{
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.listData = result.data.data.records
                        _this.totalNum = result.data.data.total
                    }
                })
            })
            // commonFun.selectMechanism(params,_this,result => {
            //      _this.listData = result.data.data.records
            //     _this.totalNum = result.data.data.total
            // })
        },
        // 详情
        doDetail(index){
            // this.$router.push('/worksDetail/'+index)
            // this.$router.push({
            //     path: '/worksDetail',
            //     name: `worksDetail`,
            //     params: {
            //         id: index, type: 2
            //     }
            // })
            commonFun.selectById(index,result => {
                this.detailForm = result.data.data
                this.dialogFormVisible = true
            })
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectProgram()
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectProgram()
        }
    }
}
</script>

<style lang="scss" scoped>
.listContent{
    height: 100%;
}
// .refreshData{
//     position: absolute;
// }
.topSearch{
    // display: flex;
    // align-items: center;
    // padding:20px 0;
    .oprate{
        // margin-top: 34px;
        margin-left: 30px;
    }
}
.list{
    .worksList{
        .v-icon{
            top:-8%;
            left:-10%;
        }
    }
}
.el-form.dialogForm{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    .el-form-item{
        width: 45%;
        .worksInput{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .labelText{
                display: flex;
                align-items: center;
                text-align: left;
                >i{
                    display: inline-block;
                    width:20px;
                    height: 20px;
                    margin-right: 10px;
                    background: url('../../../../images/icon4.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
            .addImg{
                width: 50%;
                height: 50%;
                >div{
                    width:100%;
                    height: 100%;
                }
                img{
                    border-radius: 10px;
                    cursor: pointer;
                }
            }
            .common_textarea{
                width: 60%;
            }
        }
    }
}
</style>

